<template>
  <div style="background-color: white;
    padding-block: 1vh;
    padding-inline: 2vh;
    border-radius: 20px;
    width: 100%;
    height: 100%;
">
    <el-row justify>
      <el-col :span="8" style="display: flex;align-items: center;justify-content: center">
        <!-- <font-awesome-icon style="margin: 2vh;height: 4vh;" :icon="['fas','fa-user']"></font-awesome-icon> -->
        <img style="width: 8vh;" :src="iconUrl" alt="">
      </el-col>
      <el-col :span="16">
        <el-row align style="display: flex;align-items: center;justify-content: center">
          <el-col>
            <font-awesome-icon :icon="['fas','fa-chart-bar']"></font-awesome-icon>
            总次数：{{ count }}次
          </el-col>
          <el-col style="margin-top: 1vh;">
            <font-awesome-icon :icon="['fas','fa-clock']"></font-awesome-icon>
            最长时间：{{ time }}秒
          </el-col>
          <el-col style="margin-top: 1vh;">
            <font-awesome-icon :icon="['fas','fa-hourglass-half']"></font-awesome-icon>
            指数：{{ rate }}次/小时
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import { defineProps } from 'vue';
const props = defineProps({
  count: String,
  time: String,
  rate: String,
  iconUrl: String // 添加 iconUrl prop
});
</script>

<style scoped lang="scsss">

</style>